D3JsDay04一同來見識 D3起手式—用D3寫一個Hello world

2021-09-19 Sun

如何開始 D3js

方法一 使用 CDN

請 google 搜尋 D3Js 到 D3Js 的官方網站。 滑鼠滾輪到下方處 複製<script src="https://d3js.org/d3.v7.min.js"></script> D3Js 官方網站

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
</body>
</html>

把它複製貼到你的 HTML 頁面就可以了

方法二 去官方網站下載壓縮檔

另外也可以在下方d3-7.0.1.tgz下載

解壓縮之後會看到如下圖

到dist的資料夾

把d3.js或者d3.min.js擇一複製到你的專案資料夾底下就可以了

方法三 npm install d3

有用npm(node 套件包管理工具)的人也可以使用npm install d3就會自動下載 d3 的資源包了。

檢測是否有安裝成功

使用開發者人員工具的 console 欄位鍵入d3.version

第一個 d3

有用過 jQuery 的人起手式大概很熟悉的是$字號做開頭，d3 是類似的方式，使用 d3 來做開頭後續使用方法鏈(method chain)的方式來實作每個步驟。

先直接看以下程式碼

<script>
  d3.select("body").append("div");
</script>

可以看到先選擇了body這個 tag，然後在裡面插入div，於是打開開發者人員工具

在底下插入了一個div 這邊語法講解select()是選到第一個出現的元素 然後append()是插入一個元素，換句話說如果我們選擇的元素有兩個一樣，只會選到第一個元素參見以下程式碼

<div class="hello">
</div>
<div class="hello">
</div>
<script>
  d3.select(".hello").append("div");
</script>

這個時候打開開發者人員工具會發現只有第一個class名為hello的底下有插入div這個元素 因此如果想要選取多個元素要改用selectAll()來選取多個元素

程式碼變成以下

d3.selectAll(".hello").append("div");

當打開開發者人員工具就可以發現成功插入兩個 div 元素了。

接下來我們要在新增的div底下插入文字

 d3.select("body").append("div").text("Helo world");

畫面就會出現如下面

以上介紹如何安裝 D3 和撰寫一個 Hello World 下一篇將會使用 D3 來畫出一些簡單的圖表

參考 API 文件說明

API 文件參考 select() API 文件參考 append() API 文件參考 selectAll() API 文件參考 text()

copyright